<template>
	<u-card title="会员卡" class="u-card" v-for="(x,i) in state.list" :key="i" >
		<template v-slot:body>
			<view style="line-height: 60rpx;">
				<uni-row  :gutter="30">
					<uni-col :span="6">
						会员名称:
					</uni-col>
					<uni-col :span="18">
						<view >{{ x.cardName }}</view>
					</uni-col>
				</uni-row>
				<uni-row  :gutter="30">
					<uni-col :span="6">
						价格:
					</uni-col>
					<uni-col :span="18">
						<view >{{ x.price }}</view>
					</uni-col>
				</uni-row>
				<uni-row  :gutter="30">
					<uni-col :span="6">
						会员权益:
					</uni-col>
					<uni-col :span="18">
						<view >{{ x.cardInfo }}</view>
					</uni-col>
				</uni-row>
				<view style="margin-top: 40rpx;" >
					<u-button  type="primary" v-if="state.payOk" :plain="true" @click="pay(x)">购 买</u-button>
				</view>
				
			</view>
		</template>
	</u-card>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import {
		onLoad,onShow
	} from "@dcloudio/uni-app"
	let state = reactive({
		cardInfo: "",
		cardName: "",
		price: '',
		id: '',
		openid: uni.getStorageSync('openid'),
		ownerId:uni.getStorageSync("ownerId"),
		list:[],
		payOk:false
	})

	function pay(x){
		uni.request({
			url:  "memberPay/paySign",
			method: "POST",
			data: {
				openid:state.openid,
				total:x.price*100,
				description:x.cardName
			},
			success: (res) => {
				console.log(res.data);
				const outTradeNo = res.data.outTradeNo;
				if(!state.ownerId || !outTradeNo){
					return
				}
				wx.requestPayment({
				  ...res.data,
				  success (res) {
					  uni.request({
					  	url:  "memberPay/saveApp",
					  	method: "POST",
					  	data: {
					  		openid:state.openid,
					  		ownerId:state.ownerId,
					  		memberId:x.id,
							outTradeNo:outTradeNo,
							payType:1
					  	},
					  	success: (res) => {
					  		init()
					  	}
					  })
				  },
				  fail (res) { }
				})
			}
		})
	}
    function init(){
		uni.request({
			url: "memberPay/getByOpenid",
			method: "POST",
			data: {
				openid:state.openid
			},
			success: (res) => {
				console.log(res.data)
				state.list = res.data.data;
				if(res.data.data.length == 0){
					state.payOk = true;
					uni.request({
						url: "member/list",
						success: (res) => {
							console.log(res.data)
							state.list = res.data.data;
						}
					})
				}else{
					state.payOk = false;
				}
				
			}
		})
	}
	onLoad((res) => {
		 init()
	})
	
	onShow((res) => {
		 init()
	})
	
</script>

<style scoped lang="less">
.u-body-item{
	padding: 20rpx 0;
}
.u-card{
	font-weight: bold;
	// background-color: goldenrod;
	// :deep(.u-card__head.u-border-bottom){
	// 	background-color: goldenrod;
	// 	color: #fff;
	// }
}
</style>